<template>
  <div class="main-div">
    <!-- 操作按钮区 -->
    <div class="action-buttons">
      <el-button type="primary" @click="showAddCourseDialog = true">
        <i class="fas fa-plus" aria-hidden="true"/> 新增排课
      </el-button>
      <el-button @click="refreshSchedule">
        <i class="fas fa-sync-alt" aria-hidden="true"/> 刷新
      </el-button>
    </div>

    <!-- 阅读文章卡片列表 -->
    <div class="article-cards">
      <el-card
        v-for="article in articles"
        :key="article.id"
        class="article-card"
      >
        <div class="card-content">
          <!-- 左侧封面图 -->
          <div class="cover">
            <img :src="article.cover" alt="文章封面">
          </div>

          <!-- 右侧文章信息 -->
          <div class="info">
            <div class="top-info">
              <h3 class="title">{{ article.title }}</h3>
            </div>

            <div class="middle-info">
              <span class="theme">主题：{{ article.theme }}</span>
              <span class="time">用时：{{ article.suggestedTime }}分钟</span>
              <span class="source">来源：{{ article.source }}</span>
            </div>

            <div class="start-tag-div">
              <div class="difficulty">
                难度：
                <i v-for="i in article.difficulty" :key="i" class="fas"
                   :class="i <= article.difficulty ? 'fa-star' : 'fa-star-o'"
                ></i>
              </div>
              <div class="tags">
                <el-tag v-for="tag in article.tags" :key="tag" size="mini">{{ tag }}</el-tag>
              </div>
            </div>

            <div class="buttons">
              <el-button type="primary" @click="handlePractice(article)" size="mini">
                <i class="fas fa-pencil-alt" aria-hidden="true"/> 练习
              </el-button>
              <el-button @click="handlePreview(article)" size="mini">
                <i class="fas fa-eye" aria-hidden="true"/> 预览
              </el-button>
              <el-button @click="handleInterpretation(article)" size="mini">
                <i class="fas fa-book-open" aria-hidden="true"/> 解读
              </el-button>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
export default {
  name: 'gradePassagePage',
  data() {
    return {
      showAddCourseDialog: false,
      articles: [
        {
          id: 1,
          cover: 'https://picsum.photos/120/150?random=1',
          title: '人工智能的未来发展趋势与伦理挑战',
          theme: '科技前沿',
          difficulty: 4,
          suggestedTime: 15,
          source: '科技日报',
          tags: ['人工智能', '科技', '未来趋势'],
          practiced: false
        },
        {
          id: 2,
          cover: 'https://picsum.photos/120/150?random=2',
          title: '古典文学中的人文精神与现代价值',
          theme: '文学鉴赏',
          difficulty: 3,
          suggestedTime: 20,
          source: '文学评论',
          tags: ['古典文学', '人文', '文学'],
          practiced: true
        },
        {
          id: 3,
          cover: 'https://picsum.photos/120/150?random=3',
          title: '全球气候变化的影响与应对策略研究',
          theme: '环境科学',
          difficulty: 4,
          suggestedTime: 18,
          source: '自然杂志',
          tags: ['环境', '气候变化', '科学'],
          practiced: false
        },
        {
          id: 4,
          cover: 'https://picsum.photos/120/150?random=4',
          title: '中国传统医学的现代传承与创新',
          theme: '医学健康',
          difficulty: 3,
          suggestedTime: 16,
          source: '健康时报',
          tags: ['中医', '健康', '传承'],
          practiced: true
        }
      ]
    }
  },
  methods: {
    refreshSchedule() {
      console.log('刷新排课')
    },
    handlePractice(article) {
      article.practiced = true
      console.log('进入练习：', article.title)
      this.$router.push({
        path: 'raedStudyPage',
        params: {
          articleId: article.id
        }
      })
    },
    handlePreview(article) {
      console.log('预览文章：', article.title)
    },
    handleInterpretation(article) {
      console.log('素材解读：', article.title)
    }
  }
}
</script>

<style scoped>
::v-deep * {
  margin: 0;
  padding: 0;
  user-select: none;
}

.main-div {
  background: #c1b2a3;
  min-height: 100vh;
  padding: 20px;
}

/* 操作按钮区 */
.action-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(8, 8, 8, 0.15);
  padding: 10px 5px;
  background-color: #ffffff;
}

.action-buttons .el-button {
  border-radius: 8px;
  padding: 8px 16px;
}

.action-buttons .el-button i {
  margin-right: 6px;
}

/* 文章卡片列表 */
.article-cards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap; /* 自动换行 */
  justify-content: center; /* 卡片水平居中 */
  max-width: 100%; /* 限制最大宽度，可根据需求调整 */
  margin: 0 auto; /* 容器自身水平居中 */
}

/* 单张卡片样式 */
.article-card {
  width: 420px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
}

/* 卡片内容布局 */
.card-content {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
}

/* 左侧封面图 */
.cover {
  width: 100px;
  height: 120px;
  overflow: hidden;
}

.cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 右侧文章信息 */
.info {
  flex: 1;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.top-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.title {
  font-size: 14px;
  font-weight: bold;
  color: #303133;
  line-height: 1.3;
  max-width: 280px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.difficulty {
  display: flex;
  align-items: center;
  font-size: 12px;
}

.difficulty .fa-star {
  color: #F56C6C;
  font-size: 11px;
}

.difficulty .fa-star-o {
  color: #C0C4CC;
  font-size: 11px;
}

.middle-info {
  font-size: 12px;
  color: #606266;
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap; /* 新增：允许自动换行 */
  gap: 8px; /* 调整间距，增强可读性 */
}

.middle-info p {
  margin: 2px 0;
}

.start-tag-div {
  display: flex;
  gap: 8px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.tags .el-tag {
  font-size: 12px;
  padding: 2px 4px;
}

.buttons {
  display: flex;
  gap: 6px;
}

.buttons .el-button {
  padding: 4px 8px;
  font-size: 11px;
}

.buttons .el-button i {
  margin-right: 3px;
  font-size: 11px;
}

.article-card {
  width: 420px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: row;
  transition: all 0.25s ease;
}

.article-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
}

.cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.article-card:hover .cover img {
  transform: scale(1.08);
}

/* 霓虹边框效果：卡片容器需 position: relative */
.article-card {
  position: relative;
  width: 420px;
  height: 120px;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 悬停上浮 */
.article-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.3);
}

/* ========= 霓虹边框伪元素 ========= */
.article-card::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border-radius: inherit;

  /* 渐变霓虹色彩 */
  background: linear-gradient(
    130deg,
    #fae8db,
    #c5ddd7,
    #ecdfdf
  );

  /* 动画 */
  background-size: 300%;
  filter: blur(8px);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.35s ease;
}

/* 悬停时霓虹边框发亮 */
.article-card:hover::before {
  opacity: 1;
  animation: neonFlow 2.5s linear infinite;
}

/* 霓虹流光动画 */
@keyframes neonFlow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

</style>
